
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>

		  <div class="hei10"></div>
		  <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
		    当前位置：
		    <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
		    <router-link to="/finance/onlinecommission" style="color: #409eff;">收入管理</router-link>>
		    数据核查
		  </div>
          <div class="hei10"></div>

                <div class="conlist">
                    <div class="contilte">发展供应商订单数据</div>
                    <div class="flex" style="padding: 20px;">
                        <div class="gong">
                            <el-input v-model="name" placeholder="请输入商品名称"></el-input>
                            <el-button type="danger" @click="search">检索</el-button>
                        </div>
                        <div class="gong">
                            <el-button plain style="margin-right: 20px;" @click='changetime2'>最近30天</el-button>
                            <div class="block">
                                <el-date-picker v-model="value1" @change="changetime" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                            </div>
                        </div>
                    </div>
                    <div class="list">

                        <div class="th">商品名称</div>
                        <div class="th">订单数量</div>
                        <div class="th">审核通过数量</div>
                        <div class="th">生产发货数量</div>
<!--                        <div class="th">激活数</div>
                        <div class="th">已首充</div> -->
                        <div class="th">佣金结算数量</div>

                        <div class="th td2">操作</div>
                    </div>
                    <div class="list" v-for="item in list" :key="item.id">
                        <div class="td">{{item.title}}</div>
                        <div class="td">{{item.order_amount}}</div>
                        <div class="td">{{item.submit_amount}}</div>
                        <div class="td">{{item.deliver_amount}}</div>
<!--                        <div class="td">{{item.active_amount}}</div>
                        <div class="td">{{item.first_recharge_count}}</div> -->
                        <div class="td">{{item.commission_amount}}</div>
                        <div class="td td2">
                            <el-button type="text" @click="gofazhandetail(item.parent_page_id)">查看明细</el-button>
                        </div>
                    </div>
                   <!-- <el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination> -->
                </div>
            </div>

        </div>

        <!-- <foot></foot> -->
    </div>

</template>

<script>
    import axios from 'axios'
    import top from '@/components/top.vue'
    import left from '@/components/left.vue'
    import foot from '@/components/foot.vue'
    import QRcode from '@xkeshi/vue-qrcode';
    import moment from "moment";
    export default {
        components: {
            "left": left,
            "top": top,
            "foot": foot,
            qrcode : QRcode
        },
        name: "fazhan",
        data() {
            return {
                month:"",
                total:0,
                pagesize:20,
                page:1,
                list:"",
                loading:true,
                form:{},
                value1:"",
                start:"",
                end:"",
                name:""
            }
        },
        created() {
            var shop = JSON.parse(localStorage.getItem('SHOP'));
            this.shopname = shop.shop_name
            var that = this


            this.end = moment().format("YYYY-MM-DD");
            this.start = moment().subtract(30, 'days').format("YYYY-MM-DD");
            this.value1 = [this.start,this.end]
            this.getlist()
        },
        mounted() {

        },
        methods: {
          changetime2:function(){
            this.search()
          },
          changetime:function(){
            if(this.value1){
              this.start = this.value1[0]
              this.end = this.value1[1]
            }
            this.search()
          },
            gofazhandetail:function(id){
              this.$router.push({
              	path: '/finance/fazhandetail',
              	query: { id:id }
              })
            },
            search:function(){
                this.loading = true
                this.getlist()
            },
            //翻页
            fanye:function(page){
            	this.loading = true
            	this.page = page
            	this.getlist()
            },
            //获取列表
            getlist:function(){
                var that = this
                if(this.month == null){
                    this.month = ''
                }
                http://rocky2.test/api/plan-market/income/data/check?merchant_id=50495
                axios.get('/api/plan-market/income/data/check?merchant_id='+this.$route.query.id+'&start='+this.start+'&end='+this.end+'&name='+this.name)
                	.then(response => {
                		if(response.data.msg.code == 0){
                            that.list = response.data.data
                            that.loading = false
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})
            },
        }
    }
</script>

<style lang="scss" scoped>
    .index{

        .moneylist{ display: flex;}
        .erimg{ width: 200px;}
        .red{ border: 1px #FF3B3B solid !important; color: #FF3B3B !important;}
        .moneylist div{ border: 1px #AAAAAA solid; width: 85px; height: 35px; line-height: 35px; text-align: center; margin-right: 10px; cursor: pointer;}

                .title{border-bottom: 1px #EAEAEA solid;  line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272}


            .powertop{ display: flex; background:#f9f9f9; }
            .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #EBECEF solid; color: #727272; border-right: 1px #EAEAEA solid; font-size: 14px; text-align: center;}
            .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}
            .con{  background: #FFFFFF; padding: 30px 40px; display: flex; justify-content: space-between;
                .conleft{ display: flex; flex-basis: 600px;
                  .l1{ flex-basis: 150px; text-align: center; font-size: 16px;}
                  .l2{ margin-bottom: 20px; color:#535353}
                  .l3{ color: #FF003D;}
                }
                .conright{ color:#197CFF; padding-top: 20px; cursor: pointer; }
            }
            .conlist{ padding-bottom: 20px; background: #FFFFFF; margin-top: 20px; min-height: 800px;
                .contilte{ line-height: 60px; padding-left: 20px; font-size: 15px; background: #f9f9f9;}
                .flex{ display: flex; justify-content: space-between;
                  .el-button{ padding: 9px 24px !important;}
                }
                .gong{ display: flex;
                    .el-input__inner{ width: 250px;}
                    .el-button--danger{ margin-left: 20px;}
                }
                .list{ display: flex; border-bottom: 1px #eaeaea solid;
                    .th{ background: #EAEAEA; text-align: center; flex: 1; padding: 15px 0; font-size: 14px; }
                    .td{ background: #ffffff; text-align: center; flex: 1; padding: 5px 5px; height: 40px; font-size: 14px; line-height: 40px; overflow:
                    hidden;white-space: nowrap;text-overflow: ellipsis;}
                }
                .td2{ flex:2;}
            }

    }
</style>
